<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .warp{
            position: relative;
            left: -200px;
        }
        .header{
            width: 125%;
            height: 200px;
            background-color: skyblue;
            font-size: 25px;
            color: #fff;
            position: absolute;
        }
        .anniu{
            margin-left: 210px;
        }
        .header p:last-of-type{
            font-size: 20px;
            text-align: center;
        }
        .header p:first-of-type{
            font-size: 30px;
            text-align: center;
        }
        .dianji{
            position: absolute;
            top: 100px;
            left: 60%;
            width: 80px;
            height: 50px;
            border-radius: 10px;
        }
        .main-left{
            width: 200px;
            height: 1000px;
            background-color: pink;
            color: #fff;
            position: relative;
        }
        .content ul{
            position: absolute;
            left: 400px;
            top: 250px;
            line-height: 50px;
            cursor: pointer;
        }
        .content ul li{
            width: 200px;
            height: 30px;
            margin-top: 30px;
            border-radius: 10px;
            text-align: center;
            padding-bottom: 15px;
            font-weight: bold;
            border: 1px solid#000;
        }
        .box1{
            position: relative;
        }
        .box1 p{
            position: relative;
            display: flex;
            justify-content: space-between;
            /* border: 1px solid#000; */
            top: -50px;
            left: 220px;
            width: 500px;
        }
        .shuxian{
            position: absolute;
            top: 250px;
            left: 602px;
            height: 415px;
            border: 1px solid#000;
        }
        .name{
            position: absolute;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            padding-top: 10px;
            padding-left: 20px;
            left: 600px;
            top: 250px;
            width: 500px;
            height: 415px;
        }
        .nav1{
            position: relative;
            display: flex;
            justify-content: space-between;
            left: 220px;
            top: 250px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="header">
            <button class="anniu">导航栏</button>
            <p>欢迎来到富豪排行榜</p>
            <p>weclome to the rich rank</p>
        </div>
        <div class="main-left">
            <p>主页</p>
            <p>排行榜</p>
            <p>联系方式</p>
        </div>
        <div class="content">
            <ul class="box">
                <li class="box1">添加账户</li>
                <li class="box2">资金翻倍</li>
                <li class="box3">查询百万富婆</li>
                <li class="box4">财富榜</li>
                <li class="box5">计算总额</li>
            </ul>
        </div>
        <div class="shuxian"></div>
        <div class="name">
            <span>Person</span>
            <span>Wealth</span>
        </div>
    </div>
   <script>
    let dataInfo = [{
        name: "瑞丽",
        money: 892001
      },
      {
        name: "克莉斯",
        money: 668932
      },
      {
        name: "翠花",
        money: 698756
      },
      {
        name: "小红",
        money: 492489
      },
      {
        name: "丽丽",
        money: 853957
      },
      {
        name: "尼古拉斯.翠翠",
        money: 968472
      },
      {
        name: "布鲁斯.欣欣",
        money: 718225
      },
      {
        name: "罗斯柴尔德.婷婷",
        money: 889147
      },
    ];
let warp = document.querySelector(".warp")
let anniu = document.querySelector(".anniu")
let dianji = document.querySelector(".dianji")
let content = document.querySelectorAll(".content")
let box = document.querySelector(".box1")
let box1 = document.querySelector(".box2")
let box2 = document.querySelector(".box3")
let box3 = document.querySelector(".box4")
let box4 = document.querySelector(".box5")
//点击导航栏显出左边内容
//let一个开关为true
let arr = []
let flag = true
//给导航栏按钮绑定点击事件(click)
anniu.addEventListener("click",function(){
    //判断左边内容距离为0px的时候为false进不去直接判断else为true直接执行
    if(flag){
        warp.style.left = "0px"
        warp.style.transition = "1s"
        flag = false
        //
    }else{
        warp.style.left = `-${200}px`
        warp.style.transition = "1s"
        flag = true 
    }
})

function fn (arr){
    let str = "添加账户"
    arr.forEach(function(item){
        str += `
        <p>${item.name}<span>￥${item.money}</span></p>
        `
        box.innerHTML = str;
    })
}

//给box绑定点击事件
box.addEventListener("click",function(e){
    e.stopPropagation()
    if(e.target.className =="box1"){
        // console.log(e.target.innerText);
        arr = dataInfo.slice(0,arr.length+1);
    }

    
fn(arr)
})
//资金翻倍绑定点击事件
box1.addEventListener("click",function(e){
    // e.stopPropagation()
    if(e.target.className =="box2"){
        // console.log(e.target.innerText);
        arr.forEach(function(item){
            item.money*=2;
        })
    }
    
fn(arr)
})
//百万富婆榜绑定点击事件
box2.addEventListener("click",function(e){
        e.stopPropagation()
        arr =arr.filter(function(item){
            return item.money  >= 1000000
        })
        console.log(arr);
fn(arr)
})
//财富榜绑定点击事件
box3.addEventListener("click",function(e){
    e.stopPropagation()
    arr = arr.sort(function(a,b){
        return b.money - a.money;
    })
fn(arr)
})
//计算总额的绑定事件
box4.addEventListener("click",function(e){
    e.stopPropagation()
    let vew = 0
    arr.forEach(function(item){
     vew += item.money;
    })
fn(arr)
box1.innerHTML +=  `
<p class="nav1">Total sum <span>￥${vew}</span></p>
`
})
   </script>
</body>
</html>